<template>
  <view class="miss_password">
    <view class="message_title">
      <text>为了您的账号安全，更换账号前请先进行安全验证</text>
      <text style="color: #ff5800">可以发送验证码到您的手机或邮箱</text>
    </view>
    <view class="form">
      <i-formItem title="账号" :border="false">
        <input
          v-model="userInfo.mobile"
          type="text"
          placeholder="请输入手机号或邮箱"
          :disabled="true"
        />
      </i-formItem>
      <i-formItem title="验证码" :border="false">
        <i-verification
          v-model="formData.smsCode"
          :mobile="formData.mobile"
          :kaptcha="formData.kaptcha"
          color="#FB652E"
          :type="checkEmail"
          right="calc(100vw-120rpx)"
          border="none"
          padding="0"
        >
        </i-verification>
      </i-formItem>
      <i-formItem title="图文验证码" :border="false" borderBottom="none">
        <i-kaptcha @change="(e) => (formData.kaptcha = e)"></i-kaptcha>
      </i-formItem>
      <view class="line">
        <view></view>
      </view>
      <i-formItem title="新账号" :border="false">
        <input
          v-model="formData.mobile"
          type="text"
          placeholder="请输入手机号或邮箱"
          :disabled="passwrodType === 'edit'"
        />
      </i-formItem>
      <i-formItem title="验证码" :border="false" >
        <i-verification
          v-model="formData.smsCode"
          :mobile="formData.mobile"
          :kaptcha="formData.kaptcha"
          color="#FB652E"
          :type="checkEmail"
          right="calc(100vw-120rpx)"
          border="none"
          padding="0"
        >
        </i-verification>
      </i-formItem>
      <i-formItem title="图文验证码" :border="false">
        <i-kaptcha @change="(e) => (formData.kaptcha = e)"></i-kaptcha>
      </i-formItem>
      <!-- <i-formItem title="密码" :border="false">
        <input
          v-model="formData.password"
          type="password"
          placeholder="请输入密码"
        />
        <view class="message"
          >*登录密码需同时含有字母和数字，长度在6-12之间</view
        >
      </i-formItem> -->
      <!-- <i-formItem title="确认密码" :border="false">
        <input
          v-model="rePassword"
          type="password"
          placeholder="请再次输入密码"
        />
      </i-formItem> -->

      <view style="height: 40rpx"></view>
      <i-buttons
        radius="48rpx"
        padding="18rpx 0"
        color="#fff"
        size="32"
        bgColor="#FB652E"
        @click="confirm"
        >确认
      </i-buttons>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { showTost, checkForm } from "../../utils/common";
import { smsCodeReg, passwordReg, phoneReg, emailReg } from "../../utils/regs";
import useStore from "../../stores/index";
import { resetPwd } from "../../api/index";
const formData = reactive({
  mobile: "",
  password: "",
  smsCode: "",
  kaptcha: "",
});
const rePassword = ref("");
const passwrodType = ref("notEdit");
const store = useStore();

const userInfo = computed(() => store.userInfo);
const checkEmail = computed(() => {
  console.log(formData.mobile, "mobilemobile");

  if (emailReg.test(formData.mobile)) {
    return "edit_email";
  }
  return "edit_code";
});

const confirm = async () => {
  if (!formData.mobile) {
    showTost("请输入账号");
    return;
  }
  if (rePassword.value !== formData.password) {
    showTost("两次输入密码不一致");
    return;
  }
  const flag = checkForm(formData, ["mobile"], {
    // mobile: {
    //   reg: phoneReg,
    //   message: "请输入正确手机号",
    // },
    // password: {
    //   reg: passwordReg,
    //   message: "密码长度8-16位, 由数字和字母组成",
    // },
    smsCode: {
      reg: smsCodeReg,
      message: "请输入6位验证码",
    },
  });

  if (flag) {
    return;
  }

  await resetPwd({
    mobile: formData.mobile,
    smsCode: Number(formData.smsCode),
    password: formData.password,
    pwdType: "0",
  });
  showTost("修改密码成功", () => {
    // await store.setUserInfo();
    uni.navigateBack();
  });
};

</script>

<style lang="scss" scoped>
.miss_password {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #fff;
  .message_title {
    @include flexC;
    padding: 12rpx 32rpx;
    box-sizing: border-box;
    text {
      @include dfont(22rpx);
      color: #a0a0ad;
    }
  }

  .form {
    width: calc(100% - 64rpx);
    margin: 0 auto;
  }

  input {
    width: 72%;
  }

  .message {
    @include dfont(22rpx);
    color: #ff5800;
    margin-top: 8rpx;
    margin-bottom: -10rpx;
  }
}
.line {
  width: 100%;
  height: 48rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  position: relative;
  view {
    width: 100vw;
    height: 100%;
    position: absolute;
    background-color: #f3f4f5;
    top: 0;
    left: -32rpx;
  }
}
</style>
